<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import fileApi from "@/api/file";
import { FormInstance } from "element-plus";

const show = ref(true);
const emit = defineEmits(["selectItem"]);
const list = ref({
  folders: [],
  files: []
});

const addShow = ref(false);
const formRef = ref();
const addForm = reactive({
  form: {
    name: ""
  },
  rules: {
    name: {
      required: true,
      message: "请输入"
    }
  }
});

onMounted(() => {
  getList();
});

async function getList() {
  const { data } = await fileApi.getFileList({});
  list.value = data;
}

function select(url: string) {
  emit("selectItem");
}

function addFolders() {
  formRef.value.validate(valid => {
    if (valid) {
      fileApi.getFileFoldersAdd(addForm.form).then(res => {
        getList();
        addShow.value = false;
        // formRef.value.resetField();
      });
    }
  });
}

function showAdd() {
  resetForm(formRef.value);
  addShow.value = true;
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<template>
  <ElDialog v-model="show" class="!w-[95%] md:!w-[800px]">
    <template #header>
      <div class="flex items-center">
        <span class="mr-2">文件管理器</span>
        <el-breadcrumb>
          <el-breadcrumb-item>
            <span class="text-xs hover:text-blue-500 cursor-pointer"
              >images</span
            >
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <div class="flex flex-col w-full">
      <div class="mt-2">
        <ElButton type="warning" size="small" @click="showAdd">
          <template #icon>
            <IconifyIconOnline icon="si:add-fill" width="60px" height="60px" />
          </template>
          新建文件夹
        </ElButton>
      </div>
      <div class="grid grid-cols-4 md:grid-cols-7 gap-2 flex-1 pt-5">
        <div
          v-for="(item, index) in list.folders"
          :key="index"
          class="w-[90px] h-[90px] border flex flex-col items-center justify-center cursor-pointer"
        >
          <IconifyIconOnline
            icon="ph:folders-fill"
            width="40px"
            height="40px"
          />
          <p class="text-xs">{{ item }}</p>
        </div>

        <ElImage
          v-for="(item, index) in list.files"
          :key="index"
          style="width: 90px; height: 90px"
          :src="item"
          :zoom-rate="1.2"
          :preview-src-list="list.files"
          :initial-index="index"
          fit="cover"
          @click="select(item)"
        />
      </div>
    </div>
    <template #footer>
      <!-- <ElButton type="primary">
        <template #icon>
          <IconifyIconOnline icon="ph:image" width="60px" height="60px" />
        </template>
        图片上传
      </ElButton> -->
      <ElButton @click="show = false">取消</ElButton>
    </template>
  </ElDialog>

  <!-- 新建文件夹 -->
  <ElDialog v-model="addShow" title="添加文件夹" width="500">
    <ElForm
      ref="formRef"
      :model="addForm.form"
      :rules="addForm.rules"
      label-position="top"
    >
      <ElFormItem label="文件夹名" prop="name">
        <ElInput v-model="addForm.form.name" placeholder="请输入文件夹" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton type="primary" @click="addFolders">确定</ElButton>
    </template>
  </ElDialog>
</template>
